<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

  <div id="app">
      <ul>
        <!-- 谁需要被循环, 就把v-for打在谁身上 -->
        <!-- v-for="  (每个值,索引值)  in  循环谁(哪组数据)" -->
        <!-- 优点: 组件(html元素)复用  提高复用率,提高性能 -->
        <!-- <li data-key="7f5sfs"></li>
        <li data-key="2k34h6"></li> -->
        <li v-for=" (item , index) in list" :key="item.id">
          list[index]方式: {{list[index]}}
          <br>
          {{item}}   ------  {{index}}
        </li>
      </ul>
  </div>
  <script src="./vue2.6.12.js"></script>
  <script>
    // for(var i = 0 ; i <= list.length -1 ;i++){
    //   console.log(list[i]);
    // }

    // v-for 循环
    var app = new Vue({
      el:'#app',
      data:{
        // list:[
        //   '大香蕉','小香蕉','大苹果','小苹果'
        // ],
        list:[
          {id:1,fruit:'大香蕉'},
          {id:2,fruit:'小香蕉'},
          {id:3,fruit:'大苹果'},
          {id:4,fruit:'小苹果'}
        ]
      },
      methods:{}
    })
</script>
</body>
</html>